/**
 * Created by mapbar_front on 2019/8/8.
 */
import React,{Component} from 'react';
import ReactDOM from 'react-dom';

// class Content extends Component{
//     render(){
//         return(
//             <div>
//                 name:{this.props.children}
//             </div>
//         )
//     }
// }

const modalRoot = document.getElementById('modal-root');

class Modal extends Component{
    constructor(props){
        super(props);
        this.el = document.createElement('div');
    }
    componentDidMount() {
        // Append the element into the DOM on mount. We'll render
        // into the modal container element (see the HTML tab).
        modalRoot.appendChild(this.el);
    }

    componentWillUnmount() {
        // Remove the element from the DOM when we unmount
        modalRoot.removeChild(this.el);
    }
    render(){
        return ReactDOM.createPortal(
            this.props.children,
            this.el
        )
    }
}

class Portals extends Component{
    constructor(props){
        super(props);
        this.state = {
            isShow: false,
        }
    }
    showModal=()=>{
        this.setState({
            isShow: true,
        })
    }
    closeModal=()=>{
        this.setState({
            isShow: false,
        })
    }
    render(){
        const modal = this.state.isShow?(
            <Modal>
                <div className="modal">
                    <button className="close" onClick={this.closeModal}>关闭</button>
                </div>
            </Modal>
        ):null
        return(
            <div className="box">
                <button onClick={this.showModal}>展示</button>
                {modal}
            </div>
        )
    }
}
export default Portals;


